<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">选择客户的备课计划</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in taball" :key="index" @tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
		
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true" v-if="TabCur ==0 && list.length > 0">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.username" :id="'indexes-' + item.username" 
					:data-index="item.username" 
					@click="jump($event, item)">
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-item">
							<view class="cu-avatar round lg margin-xs bg-gradual-green">
								<text class="avatar-text">
									{{ item.nickName || item.username }}
								</text>
							</view>
							<view class="content">
								<view class="text-black">{{ item.nickName || item.username }}
								<text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.mark}}</text>
								<text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.label}}</text>
								</view>
								<view class="text-gray text-sm">
									{{item.phone}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<button class="btn shadow">共 {{list.length}} 人</button>
		</scroll-view>
		
		<view v-if="list.length == 0" style="width: 100%;margin: 0 auto;">
			<image src="../../static/11.png" mode="widthFix" style="margin: 200upx auto;display: block;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0, //默认选中项
				scrollLeft: 0,
				taball:[
					// {
					// 	name: '最近联系',
					// 	index: 0,
					// },
					{
						name: '全部客户',
						index: 1,
					},
				],
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [], // 全部用户
				listCur: '',
				isDatas: false,
			};
		},
		onLoad() {
			this.setajax()
		},
		onShow() {
			this.setajax()
		},
		onReady() {
			let that = this;
			// uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
			// 	that.boxTop = res.top
			// }).exec();
			// uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
			// 	that.barTop = res.top
			// }).exec()
		},
		methods: {
			async setajax() {
				let data = {
					'coachId': uni.getStorageSync("openid"),
					level: 0,
				}
				let {
					data: {
						datas: {
							list
						}
					}
				} = await this.$myRuquest({
					url: "/coach/members/getCoachMembersList",
					data,
				})
				this.list = list
			},
			async huoqu(item) {
				let {
					data: {
						datas
					}
				} = await this.$myRuquest({
					url: "/coach/training/getTrainingPlanList",
					data: {
						userId: item.userId
					}
				})
				if (datas.length) this.isDatas = true
				else this.isDatas = false
				console.log('查看是否有数据，没有跳转创建界面', datas, this.isDatas)
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			async jump(e, item){
				await this.huoqu(item);
				let url = this.isDatas ? "/pagesA/Preparation_plan/Project_details" :
					"/pagesA/Preparation_plan/Add_course";
					console.log('跳转前查看', this.isDatas, url);
					uni.setStorageSync("phyUser", item)
					
				if ( e.currentTarget.dataset.src == 'Not-yet-open') {
					uni.showModal({
						title:'提示',
						content:'功能即将开放',
						showCancel: false,
						confirmColor:"#DD524D",
							success() {
								return
							}
					})
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.btn {
		position: fixed;
		bottom: 70upx;
		left: 50%;
		font-size: 28upx;
		background-color: #fff;
		transform: translate(-50%, 0%);
		border-radius: 50upx;
		box-shadow: 0px 6px 5px #888888;
	}
	button::after {
		border: none;
	}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
